<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    

    <style>
        /* 
        1. flex-flow是flex-direction || flex-wrap的简写
        
        2. flex-direction: 排列方向
            row: 从左到右
            row-reverse: 从右到左
            column: 从上到下
            column-reverse: 从下到上

        3. flex-wrap设置是否换行
            nowrap: 不换行
            wrap: 换行
            wrap-reverse: 从右向左换行

        4. justify-content: 内容排列方向(flex item在main axis上的对齐方式)
            flex-start: 左对齐
            flex-end: 右对齐
            center: 居中
            space-between: 两端对齐，项目之间的间隔都相等
            space-around: 两端对齐，项目之间的间隔比项目与边框的间隔要大

        5. align-items: 内容排列方向(flex line在cross axis上的对齐方式,一般是针对单行)
            flex-start: 左对齐
            flex-end: 右对齐
            center: 居中
            baseline: 基线对齐
            stretch: 拉伸

        6. align-content设置flex line在cross axis上的对齐方式(一般是针对多行的)
            flex-start: 左对齐
            flex-end: 右对齐
            center: 居中
            space-between: 两端对齐，项目之间的间隔都相等
            space-around: 两端对齐，项目之间的间隔比项目与边框的间隔要大
            stretch: 拉伸
        */
        .container {
            border: 1px solid #000 ;
            width: 400px;
            height: 400px;
            margin-left: 20px;
            margin-top: 20px;
            /* inline-flex是行内   flex块级元素 */
            display: flex;    
            /* row从左往右  row-reverse从右往左 */
            /* column从上往下  column-reverse从下往上 */
            flex-direction: row;
            /* flex-start跟main start对齐   flex-end跟main end对齐  center */
            /* flex-direction: column从上到下，flex-end跟main end对齐 */
            /* space-between 左右各占一个   space-evenly元素之间，main start  main end之间的距离都一样 */
            /* space-around 距离main start/end 的距离是元素之间的距离的一半 */
            /* justify-content: center; */
            /* 交叉轴是从上到下或者从左到右2种 */
            /* align-items: center; */

            /*当宽度不够的时候，决定是单行还是多行 */
            /* flex-wrap: wrap-reverse;
             */
             flex-wrap: wrap;

             /* flex-flow: column wrap; */

             align-content: stretch;
        }

        .item {
            width: 100px;
            height: 100px;
            font-size: 50px;
            color: aliceblue;
            text-align: center;
            line-height: 100px;
        }

        .item:nth-of-type(1) {
            background: red;
        }

        .item:nth-of-type(2) {
            background: green;
        }

        .item:nth-of-type(3) {
            background: blue;
        }

        .item:nth-of-type(4) {
            background: yellow;
        }

        .item:nth-of-type(5) {
            background: orange;
        }

        .item:nth-of-type(6) {
            background: purple;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</body>
</html>